<template>
  <a-card style="width: 100%" title="申报流程">
    <template #extra>
      <a-tooltip placement="top">
        <template #title>
          <span>返回上级</span>
        </template>
        <a-button size="small" @click="getOut"> <RollbackOutlined /></a-button>
      </a-tooltip>
    </template>
    <div class="header">
      <ul>
        <li v-for="(item, index) in steps" :key="index" :style="getItemStyle(index)">
          {{ item }}
        </li>
      </ul>
      <div class="change" v-if="status == 0 && status != 2 && status != 3 && status != 4 && status != -1">
        <div class="tips">
          <div>
            <span>*资料已提交。</span>
          </div>
        </div>
        <!-- 内容 根据后端返回内容，返回不同的结果-->
        <div class="content">
          <div class="contentArea">
            <h2 style="color: #438eb9">资料审核中...</h2>
            <p>您的资料已上传完成,请耐心等待3-5个工作日,我们的工作人员会通过手机</p>
            <p>短信，邮箱的形式告知您的审核状态，请注意查收。</p>
          </div>
        </div>
      </div>
      <div class="change" v-if="status == 2">
        <div class="tips">
          <div>
            <span>*资料已提交。</span>
          </div>
        </div>
        <!-- 内容 根据后端返回内容，返回不同的结果-->
        <div class="content">
          <div class="contentArea">
            <h2 style="color: #438eb9">资料审核中...</h2>
            <p>
              请携带好您的项目申报书到基金会盖章 <span style="color: #438eb9; cursor: pointer" @click="getDowloads">点击下载学院盖章的申报书</span>
            </p>
            <p>基金会地址：兰州大学大学生活动中心403室</p>
          </div>
        </div>
      </div>
      <div class="change" v-if="status == 3 || status == 4">
        <div class="tips">
          <div>
            <span>*资料已提交。</span>
          </div>
        </div>
        <!-- 内容 根据后端返回内容，返回不同的结果-->
        <div class="content">
          <div class="contentArea">
            <h2 style="color: #438eb9">资料审核中...</h2>
            <p>您好!工作人员在正在对您已盖章的资料进行处理。请耐心等待。</p>
          </div>
        </div>
      </div>
      <div class="change" v-if="status == 5">
        <div class="tips">
          <div>
            <span>*资料已提交。</span>
          </div>
        </div>
        <!-- 内容 根据后端返回内容，返回不同的结果-->
        <div class="content">
          <div class="contentArea">
            <p>恭喜您！审核流程已全部完成！您可进行下一步操作了。</p>
            <a-button @click="getFindKan">资料预览</a-button>
          </div>
        </div>
      </div>
      <div class="change" v-if="status == -1">
        <div class="tips">
          <div>
            <span>*对不起，您提交的资料不符合标准请重新提交</span>
          </div>
        </div>
        <!-- 内容 根据后端返回内容，返回不同的结果-->
        <div class="content">
          <div class="contentAreaText">
            <h2 style="color: red">审核不通过原因</h2>
            <p>
              {{ wey }}
            </p>
            <span style="color: #438eb9">您填写的信息有误 , 返回</span>
            <span style="color: red; cursor: pointer" @click="getUpdate(1)">点击修改</span>
          </div>
        </div>
      </div>
    </div>
  </a-card>
  <br />
</template>

<script setup>
  import { ref, reactive, defineEmits, defineProps, onMounted } from 'vue';
  import { smartSentry } from '/@/lib/smart-sentry';
  import { Funding } from '../../../api/funding/funding-api';
  import axios from 'axios';
  const props = defineProps({
    status: Number,
    DataId: String,
  });
  const status = ref(0);
  const steps = reactive(['资料填写', '基金会审核中', '携带申报书到基金会盖章', '申报书盖章中', '申报成功']);

  //控制背景颜色的方法
  function getItemStyle(index) {
    const baseColor = '#dedede';
    const highlightColor = '#438eb9'; // 示例背景色
    switch (status.value) {
      case 0:
        return index === 0 ? { backgroundColor: highlightColor } : { backgroundColor: baseColor };
      case 1:
        return index <= 1 ? { backgroundColor: highlightColor } : { backgroundColor: baseColor };
      case 2:
      case 3:
        return index <= 2 ? { backgroundColor: highlightColor } : { backgroundColor: baseColor };
      case 4:
        return index <= 3 ? { backgroundColor: highlightColor } : { backgroundColor: baseColor };
      case -1:
        return index === 0 ? { backgroundColor: highlightColor } : { backgroundColor: baseColor };
      case 5:
        return { backgroundColor: highlightColor };
      default:
        return { backgroundColor: baseColor };
    }
  }
  //查询审核流程
  const wey = ref();
  const path = ref();
  async function getFindStatus() {
    try {
      let res = await Funding.FlowPath(props.DataId);
      status.value = res.blfinancproject.blauditstate;
      wey.value = res.blfinancproject.blext1;
      path.value = res.blfinancproject.bluploadurl;
      console.log(res, '审核状态');
    } catch (error) {
      smartSentry.captureError(error);
    }
  }
  //下载功能
  async function getDowloads() {
    try {
      let res = await Funding.DoloadWord(props.DataId);
      window.open(res.blfinancproject.bldownloadurl, '_self');
    } catch (error) {
      smartSentry.captureError(error);
    }
  }
  const getFindKan = () => {
    window.open(path.value, '_blank');
  };

  //返回的按钮操作
  const emit = defineEmits();
  const getOut = () => {
    let obj = {
      type: 0,
    };
    emit('getBlack', obj);
  };

  const getUpdate = (e) => {
    let obj = {
      type: e,
      id: props.DataId,
    };
    emit('getBlack', obj);
  };
  onMounted(() => {
    getFindStatus();
  });
</script>

<style lang="scss" scoped>
  .header {
    width: 100%;
    margin: auto;
    padding: 10px; /* 调整内边距来保持间隙一致 */
    box-sizing: border-box; /* 确保内边距包含在总宽度内 */
    ul {
      display: flex; /* 使用 Flexbox 布局 */
      justify-content: center; /* 居中对齐 */
      flex-wrap: wrap; /* 当空间不足时换行 */
      padding: 0;
      margin: 0;
      list-style: none;
      width: 100%;
    }

    li {
      width: 290px;
      height: 40px;
      line-height: 20px;
      padding: 10px;
      background-color: #dedede;
      margin: 0px 1px;
      text-align: center;

      color: #ffff;
    }
    li:first-child {
      border-bottom-left-radius: 20px;
      border-top-left-radius: 20px;
    }
    li:last-child {
      border-bottom-right-radius: 20px;
      border-top-right-radius: 20px;
    }
  }
  .change {
    margin-top: 30px;
  }
  .tips {
    margin: 10px 4.3% 20px;
    background: #fffcf5;
    line-height: 38px;
    border: 1px solid #b99f6c;
    font-size: 14px;
    text-align: center;
    color: #b8a273;
  }
  .content {
    background: #f7f7f7;
    border: 1px solid #dedede;
    margin: 40px 4.3% 0px 4.3%;
    padding: 15px 19px;
    padding-bottom: 50px;
    min-height: 450px;
  }
  .contentArea {
    text-align: center;
    margin-top: 30px;
  }
  .contentAreaText {
    text-align: center;
    width: 100%; /* 设置宽度为100%，可以根据需要调整 */
    overflow-wrap: break-word; /* 允许单词在超出边界时换行 */
    word-wrap: break-word; /* 兼容旧版浏览器 */

    h2 {
      margin: 20px 0 1.5em 0;
      color: red;
    }
  }
</style>
